﻿[%^Main%]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VietSilver CMS</title>
<link type="text/css" rel="stylesheet" href="~/../style/reset.css"/>
<link type="text/css" rel="stylesheet" href="~/../style/login.css"/>
<script type="text/javascript" language="javascript" src="~/../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="~/../js/jquery.validate.pack.js"></script>
<script type="text/javascript" language="javascript" src="~/../js/jShake.js" ></script>
<script type="text/javascript" language="javascript" src="~/../js/login.js" ></script>
<script type="text/javascript" language="javascript">
	var invalidUsername = '{{#InvalidUserName}}';
	var invalidPassword = '{{#InvalidPassword}}';
	var invalidAll = '{{#InvalidAll}}';

	$(document).ready(function(){
		var container = $('#error');
		$('#username').select();
		
		$('#error').bind('beforeShow', function(){ $('#custom-error').hide(); });
		
		$('#loginForm').validate({
			errorContainer: container,
			errorLabelContainer: $('ol', container),
			invalidHandler: function(){
				$('#login').effect('shake', {times: 3}, 100, function(){
					$('input[type="submit"]').removeAttr('disabled');
					if ($('#username').attr('class') == 'error'){
						$('#username').select();
					}else{
						if ($('#password').attr('class') == 'error') $('#password').select();
					}
				});
			},
			onkeyup: false,
			submitHandler: function(){
				Login('loginForm');
				$('input[type=submit]', this).attr('disabled', 'disabled');
			},
			wrapper: 'li',
			focusInvalid: false,
			rules: {
				username: {required: true, minlength:3, maxlength: 50},
				password: {required: true, minlength:3, maxlength: 50}
			},
			messages:{
				username: {
					required: '{{#UserRequire}}',
					minlength: '{{#UserMinLength}}',
					maxlength: '{{#UserMaxLength}}'
				},
				password: {
					required: '{{#PasswordRequire}}',
					minlength: '{{#PasswordMinLength}}',
					maxlength: '{{#PasswordMaxLength}}'
				}
			}
		});				
	});
	
	function ChangeLanguage(lang){
		$.ajax({
			url: 'ajax.aspx?type=language&code=' + lang + '&rnd=' + Math.random(),
			success: function(data) {
				window.location.reload();					
			}
		});
	}
</script>
</head>
<body>
<div id="logo"><img src="~/../images/logo.png" /></div>
<div id="error">
	<p><strong>{{#Error}}:</strong></p>
  <ol></ol>
</div>
<div id="custom-error">
	<p><strong>{{#Error}}:</strong><span id="loginResult"></span></p>
</div>
<div id="wrapper">[%^LanguageFlag%]
	<div id="language" class="clearfix">
  	<ul>[%^LanguageFlagItem%]
    	<li><a href="javascript:void(0);" onclick="javascript:ChangeLanguage('{{langCode}}');"><img src="~/../images/{{langCode}}.png" alt="{{langName}}" /></a></li>[%$LanguageFlagItem%]
    </ul>
  </div>[%$LanguageFlag%]
  <div id="login">
    <form id="loginForm" action="login.aspx" method="post">
      <p>{{#Username}}:</p>
      <input type="text" id="username" name="username" />
      <p>{{#Password}}:</p>
      <input type="password" id="password" name="password" />[%^Language%]
      <p>{{#Language}}:</p>
      <select id="languageSelect" name="languageSelect">[%^LanguageItem%]
      	<option value="{{langCode}}">{{langName}}</option>[%$LanguageItem%]
      </select>
      <script>$('#languageSelect').val('{{currentLanguage}}');</script>[%$Language%]
      <input type="submit" id="submit" name="submit" value="{{#Login}}" />
    </form>
  </div>
</div>  
</body>
<!--{{errorCode}}-->
</html>
[%$Main%]